<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="数据统计" name="sjtj">
        <el-row>
          <el-col :span="18">
            <div align="center" id="histogram" style="width:100%; height:900px;"></div>
          </el-col>
          <el-col :span="6">
            <div class="tjInfo">
              <h2 style="padding:12px">数据统计</h2>
              <div style="padding:5px">
                <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
                  <tr>
                    <td>地区</td>
                    <td>重点信访人员</td>
                  </tr>
                  <tr v-for="(v,index) in myobj" :key="index" :class="index%2==0?'mycolor':''">
                    <td>{{v.name}}</td>
                    <td>{{v.value}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="数据检索" name="sjjs">
        <el-row>
          <el-col :span="$store.getters.user.userRole=='超级管理员'?3:0">
            <tree-component @GetNodeValue="GetNodeValue"></tree-component>
          </el-col>
          <el-col :span="$store.getters.user.userRole=='超级管理员'?21:24">
            <el-row>
              <el-col :span="8">
                <el-button @click="exportData" style="float:left;" type="success">
                  <img src="../../assets/daoru.png" alt=""> 导出
                </el-button>
                <el-upload action="xxxxxxxxxx" style="text-align:left;display:inline-block;width:150px;height:38px;overflow: hidden;margin-left:10px">
                  <el-button type="success">
                    <img src="../../assets/daochu.png" alt=""> EXCEL导入
                  </el-button>
                </el-upload>
              </el-col>
              <el-col :span="16">
                <div align="right">
                  <el-button @click="addNewRecord" type="primary">添加重点信访人员</el-button>
                  <el-input style="width:200px" v-model="filters.name" placeholder="姓名"></el-input>
                  <el-input style="width:200px" v-model="filters.certifID" placeholder="身份证号"></el-input>
                  <el-button type="primary" @click="getkeyPetitioner">查询</el-button>
                  <el-button type="primary" @click="showAll">显示所有</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="padding-top:10px">
                <el-table :data="dataList" style="width:100%">
                    <el-table-column v-for="(v,k,i) in form" :key="i" :prop="k" align="center" :label="labels[i]" :class="k=='certifID'?width_Class:{}">
                      <template scope="scope" >
                        <span v-if="k=='certifID'">
                          {{formatCertifID(scope.row[k])}}
                        </span>
                        <span v-else>
                          {{scope.row[k]}}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                      <template scope="scope">
                        <el-button type="text" size="small" @click="watchDetail(scope.row.certifID)">
                          查看详情</el-button>
                        <el-button type="text" size="small" @click="editDetail(scope.row.certifID)">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteById(scope.row.tekeyPID)">删除</el-button>
                      </template>
                    </el-table-column>
                    </el-table>
                            </el-col>
                            <el-col :span="24" style="margin-top:10px" align="right">
                                <el-pagination layout="prev, pager, next" :total="totalInfo"  @current-change="handleCurrentChange">
                                </el-pagination>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="添加重点信访人员" :visible.sync="visible">
          <key-petitioner :form="infoForm" @closeDialog="closeDialog"></key-petitioner>
        </el-dialog>

        <el-dialog title="编辑重点信访人员" :visible.sync="visible2">
          <key-petitioner :form="editForm"  @closeDialog="closeDialog" :usePath="'update'"></key-petitioner>
        </el-dialog>

        <el-dialog top="2%" size="large" title="查看人员详情" :visible.sync="visible3">
          <el-tabs type="border-card">
            <el-tab-pane label="特殊信息">
              <key-petitioner :form="infoForm2" :showButton="false"></key-petitioner>
            </el-tab-pane>
            <el-tab-pane id="userBasicInfo" label="基本信息">
              <baisc-table :memberInfo="infoBasic" :fatherAndChildVO="fatherAndChildVO" ></baisc-table>
            </el-tab-pane>
          </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
  import * as api from "@/api/specialPopulation/index";
  import treeComponent from "../../components/common/treeComponent";
  import keyPetitioner from "../../components/ZzOrgManage/extendKeyPetitioners"
  // 基本表格组件
  import BaiscInfoTable from "../../components/InfoTemplate";

  // 基本表格组件
  import BaiscTable from "../../components/ZzOrgManage/servedBasicTable";

  export default {
    components: {
      treeComponent: treeComponent,
      keyPetitioner: keyPetitioner,
      BaiscInfoTable: BaiscInfoTable,
      BaiscTable:BaiscTable
    },
    data() {
      return {
        width_Class:{
          width:'250px'
        },
        activeName: "sjtj",
        visible:false,
        visible2:false,
        visible3:false,
        histogram: null,
        filters: {
          // 查询表单
          name: null, // 姓名
          certifID: null, //身份证
          netGridID: null, // 网格id
          page: 1, // 页码
          pageSize: 10 // 页号
        },
        form: {
          name:'',
          certifID: '',
          activityTypeName: '',
          measuresTypeName: '',
          economicSourceTypeName: '',
          steadyStateTypeName: '',
          steadyGradeTypeName: '',
          // petitionTypeName: '',
          // petitionStatusCode: '',
        },
        labels: ['姓名','公民身份证', '活跃度', '措施手段',
          '经济来源', '涉稳状态', '涉稳等级', '上访类型',
          '上访状态'
        ],
        names: ['信息主键编号', '公民身份证', '活跃度', '措施手段',
          '经济来源', '涉稳状态', '涉稳等级', '上访类型',
          '上访状态', '上访原因', '在位情况', '处理情况',
          '工作协调会', '谈话教育训诫等'
        ],
        infoBasic:{},
        infoForm:{
          tEKeyPID: '',
          certifID: '',
          activityCode: '',
          measuresCode: '',
          economicSourceCode: '',
          steadyStateCode: '',
          steadyGradeCode: '',
          petitionTypeCode: '',
          petitionStatusCode: '',
          reasonsPetitionReasons: '',
          detailSituation: '',
          treatmentDetailSituation: '',
          workCoordinationDetails: '',
          talkEducationAdmonitionDetails: ''
        },
        editForm:{},
        infoForm2:{},
        totalInfo: 40, // 页码总数
        dataList: [],
        myobj: []
      };
    },
    methods: {
      closeDialog(){
        this.visible = false
        this.visible2 = false
        this.getkeyPetitioner()
      },
      addNewRecord(){
        this.visible = !this.visible

      },
      showAll() {
        this.filters.name = this.filters.certifID = this.filters.netGridID = null
        this.getkeyPetitioner()
      },
      GetNodeValue(id) {
        this.filters.netGridID = id
        this.getkeyPetitioner()
      },
      deleteById(id) {
        this.$confirm('是否删除此人记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteSpecialPerson(id, '07').then(res => {
            if (res.data) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getkeyPetitioner()
            } else {
              this.$message({
                type: 'error',
                message: res.message
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      editDetail(id) {
        api.fetchSpecialPeronDetail(id,'07').then(res=>{
          this.editForm = res.data.special
          this.visible2 = true
        })
      },
      watchDetail(id) {
        api.fetchSpecialPeronDetail(id,'07').then(res=>{
          this.infoBasic = res.data.basic[0]
          this.fatherAndChildVO = res.data.fatherAndChildVO;
          this.infoForm2 = res.data.special
          this.visible3 = true
        })
      },
      exportData() {
        // 导出数据
      },
      getXbyLength(length){
        let x = ''
        for(let i=0;i<length-1;i++){
          x +='X'
        }
        return x
      },
      formatCertifID(v){
        return v.replace(v.substr(4,10),'XXXXXXXX')
      },
      getkeyPetitioner() {
        api.getKeyPetitionersQuery(this.filters).then(res => {
          this.dataList = res.data.keyPetitioners;
          this.dataList.forEach(item=>{
            if(item.name!=null)
              item.name = item.name.charAt(0) + this.getXbyLength(item.name.length)
            else
              item.name = 'XXX';
          })
          this.totalInfo = res.data.page.totalCount;
        });
        this.filters.name = this.filters.certifID = null
      },
      // 翻页
      handleCurrentChange(val) {
        this.filters.page = val;
        this.getkeyPetitioner()
      },
      // 绘制饼状图
      drawPie(obj) {
        this.histogram = echarts.init(document.getElementById("histogram"));
        this.histogram.setOption({
          backgroundColor: "#eeeeee",
          title: {
            text: "重点信访人员各村分布图",
            left: "center",
            top: 20,
            textStyle: {
              color: "#000000"
            }
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c}人({d}%)"
          },
          series: [{
            name: "分布比例",
            type: "pie",
            radius: "80%",
            center: ["50%", "55%"],
            data: obj.sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(25,25,112, 1)"
                }
              }
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }]
        });
      },
      initChart() {
        api.getKeyPetitionersPieCount().then(res => {
          this.myobj = res.data
          this.drawPie(this.myobj);
        })
      }
    },
    mounted() {
      if(this.$store.getters.user.userRole!='超级管理员')
        this.filters.netGridID = this.$store.getters.user.netGridID
      this.initChart();
      this.getkeyPetitioner();
    }
  };
</script>

<style scoped>
  .tjInfo {
    /* margin-top: 50px; */
    background-color: aliceblue;
    width: 100%;
    height: 700px;
    padding: 10px;
    /* text-indent: 2em; */
  }

  .userInfoEditTable,
  .userInfoEditTable td {
    /* font-size: 8px; */
    border: 1px solid darkgrey;
    padding: 10px;
    text-align: center;
  }

  .width_Class{
    width: 300px;
  }
</style>
